<template>
  <div class="execution">
    <basic-container>
      <el-row>
        <el-col :span="4" class="vendorName">
          <el-image
            style="display: inline-block ; width: 100px; height: 100px;background-color: yellow"
            :src="url"
            fit="fill"></el-image>
          <p>福城生鲜</p>
        </el-col>
        <el-col :span="6" class="companyData">
          <h4>商家: <span>{{this.$route.query.merchantName}}</span></h4>
          <p>联系人: <span>{{this.$route.query.contact}}</span></p>
          <p>手机号: <span>{{this.$route.query.telephone}}</span></p>
          <p>采购商类型: <span>{{this.$route.query.buyerType}}</span></p>
        </el-col>
        <el-col :span="8" class="classifyBox">
          <el-row>
            <el-col :span="8" class="message">
              <el-image
                style="display: inline-block ; width: 50px; height: 50px;background-color: blue"
                :src="url"
                fit="fill"></el-image>
              <p>订单 <span>100</span></p>
            </el-col>
            <el-col :span="8" class="message">
              <el-image
                style="display: inline-block ; width: 50px; height: 50px;background-color: blue"
                :src="url"
                fit="fill"></el-image>
              <p>退货 <span>100</span></p>
            </el-col>
            <el-col :span="8" class="message">
              <el-image
                style="display: inline-block ; width: 50px; height: 50px;background-color: blue"
                :src="url"
                fit="fill"></el-image>
              <p>成交金额 <span>100</span></p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </basic-container>

    <basic-container  class="contentBox">
      <div class="basic">
        <h2 class="io-goods-detail">
          基础信息
        </h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple">详细地址:{{this.$route.query.address}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">电话:{{this.$route.query.telephone}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div>是否需要确认订单:{{this.$route.query.needConfirmation}}</el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>消息推送:{{this.$route.query.needPush}}</el-col>
            <el-col :span="6"><div class="grid-content bg-purple">信息启用:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">小程序启用:{{this.$route.query.status}}</div></el-col>
          </el-row>
        </template>
      </div>


      <div class="finance">
        <h2 class="io-goods-detail">
          财务信息
        </h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple">开户名称:1111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">开户银行:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div>银行账号:111</el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>发票抬头:111</el-col>
            <el-col :span="6"><div class="grid-content bg-purple">税号:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">账期:1111</div></el-col>
          </el-row>
        </template>
      </div>

      <div class="principal">
        <h2 class="io-goods-detail">
          业务负责人
        </h2>
        <template>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple">业务经理:1111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">运营专员:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div>银行账号:111</el-col>
          </el-row>
          <el-row class="io-goods-detail basic-information">
            <el-col :span="6"><div class="grid-content bg-purple-light"></div>发票抬头:111</el-col>
            <el-col :span="6"><div class="grid-content bg-purple">税号:111</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">账期:1111</div></el-col>
          </el-row>
        </template>
      </div>
    </basic-container>


  </div>
</template>

<script>
    export default {
        name: "index",
        data() {
          return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
        }
    }
</script>

<style scoped lang="scss">
  .vendorName{
    text-align: center;
    p{
      margin-top: 10px;
    }
  }
  .companyData{
    border-left: 1px dashed #999;
    border-right: 1px dashed #999;
    padding-left: 100px;
    h4,p{
      margin-bottom: 15px;
    }
  }
  .classifyBox{
    text-align: center;
    .message{
      margin-top: 30px;
      p{
        margin-top: 10px;
        span{
          color: blue;
        }
      }

    }
  }
  .contentBox{
    .io-goods-detail{
      margin-left: 10px;
    }
    .settle-accounts{
      text-align: right;
    }
    .basic-information {
      margin-top: 20px;
      font-weight: inherit;
    }
    .return-btn{
      height: 100px;
      width: 100%;
      text-align: center;
      line-height: 100px;
    }
    .tabContent{
      padding-left: 10px;
      .el-tabs__item{
        font-size: 20px;
      }
    }
    .finance,.basic,.principal{
      margin-bottom: 20px;
      h2{
        background-color: #eee;
        margin-left: 0;
        padding-left: 10px;
      }
    }
  }


</style>
